<template>
  <div class="content">
    <el-row>
      <el-col :span="24">
        <div style="padding: 20px; border-radius: 10px" class="info">
          <el-descriptions
            class="margin-top"
            title="个人信息"
            :column="3"
            :size="size"
            :style="blockMargin"
          >
            <template #extra>
              <el-button type="primary" @click="editUser(userId)"
                >修改</el-button
              >
            </template>
            <el-descriptions-item label="用户编号">{{
              data.user.id
            }}</el-descriptions-item>
            <el-descriptions-item label="用户名">{{
              data.user.username
            }}</el-descriptions-item>
            <el-descriptions-item label="密码">********</el-descriptions-item>
            <el-descriptions-item label="姓名">{{
              data.user.name
            }}</el-descriptions-item>
            <el-descriptions-item label="年龄">{{
              data.user.age
            }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{
              data.user.sex
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="info">
          <el-button class="fbu" type="primary" @click="addVote = true"
            >发布新的</el-button
          >
          <h4>我的发布</h4>
          <el-table :data="data.myVote" stripe>
            <el-table-column type="index" label="序号" :width="50" />
            <el-table-column prop="theme" label="投票主题" />
            <el-table-column prop="themeInfo" label="投票简介" />
            <el-table-column prop="myOption" label="投票选项"></el-table-column>
            <el-table-column prop="num" label="投票数量"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column fixed="right" label="操作" width="220">
              <template #default="scope">
                <el-tooltip
                  class="box-item"
                  content="编辑"
                  placement="top"
                  effect="light"
                >
                  <el-button type="primary" @click="editVote(scope.row.id)">
                    <el-icon>
                      <Edit />
                    </el-icon>
                  </el-button>
                </el-tooltip>
                <el-tooltip
                  class="box-item"
                  content="删除"
                  placement="top"
                  effect="light"
                >
                  <el-button type="danger" @click="deleteVote(scope.row.id)">
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              v-model:currentPage="data.myVoteQuery.pageIndex"
              v-model:page-size="data.myVoteQuery.size"
              :page-sizes="[1, 2, 5]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="data.myVoteQuery.total"
              @size-change="handleUserVoteSizeChange"
              @current-change="handleUserVoteCurrentChange"
            />
          </div>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="info">
          <h4>我的投票</h4>
          <el-table :data="data.userVote" stripe>
            <el-table-column type="index" label="序号" :width="50" />
            <el-table-column prop="theme" label="投票主题" />
            <el-table-column prop="option" label="我的选项">
              <template #default="scope">
                <el-select
                  v-model="data.voteFrom.myOption"
                  placeholder="投票类型"
                  v-if="exId == scope.row.id"
                >
                  <el-option
                    v-for="item in data.myVoteFrom.option"
                    :label="item.option"
                    :value="item.option"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" />

            <el-table-column fixed="right" label="操作" width="220">
              <template #default="scope">
                <el-tooltip
                  class="box-item"
                  content="保存"
                  placement="top"
                  effect="light"
                  v-if="exId == scope.row.id"
                >
                  <el-button type="primary" @click="updateMyVote()">
                    <el-icon>
                      <Check />
                    </el-icon>
                  </el-button>
                </el-tooltip>
                <el-tooltip
                  class="box-item"
                  content="编辑"
                  placement="top"
                  effect="light"
                  v-else
                >
                  <el-button
                    type="primary"
                    @click="editMyVote(scope.row.id, scope.row.voteId)"
                  >
                    <el-icon>
                      <Edit />
                    </el-icon>
                  </el-button>
                </el-tooltip>
                <el-tooltip
                  class="box-item"
                  content="取消"
                  placement="top"
                  effect="light"
                  v-if="exId == scope.row.id"
                >
                  <el-button type="danger" @click="exId = -1">
                    <el-icon>
                      <Close />
                    </el-icon>
                  </el-button>
                </el-tooltip>
                <el-tooltip
                  class="box-item"
                  content="删除"
                  placement="top"
                  effect="light"
                  v-else
                >
                  <el-button type="danger" @click="deleteMyVote(scope.row.id)">
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              v-model:currentPage="data.userVoteQuery.pageIndex"
              v-model:page-size="data.userVoteQuery.size"
              :page-sizes="[1, 2, 5]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="data.userVoteQuery.total"
              @size-change="handleUserVoteSizeChange"
              @current-change="handleUserVoteCurrentChange"
            />
          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      v-model="upMyVote"
      title="修改投票"
      width="30%"
      :before-close="clearInput"
    >
      <el-form :model="data.myVoteFrom" label-position="top">
        <el-form-item label="投票主题">
          <el-input v-model="data.myVoteFrom.theme" placeholder="投票主题" />
        </el-form-item>
        <el-form-item label="投票介绍">
          <el-input
            v-model="data.myVoteFrom.themeInfo"
            type="textarea"
            placeholder="投票介绍"
          />
        </el-form-item>
        <el-form-item label="投票类型">
          <el-select v-model="data.myVoteFrom.themeType" placeholder="投票类型">
            <el-option
              v-for="item in data.typeList"
              :label="item.type"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="选项">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-input v-model="input1" placeholder="选项1" />
            </el-col>
            <el-col :span="12" style="margin-bottom: 10px">
              <el-input v-model="input2" placeholder="选项2" />
            </el-col>
            <el-col :span="12">
              <el-input v-model="input3" placeholder="选项3" />
            </el-col>
            <el-col :span="12">
              <el-input v-model="input4" placeholder="选项4" />
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="clearInput">取消</el-button>
          <el-button type="primary" @click="updateVote()">提交</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      v-model="addVote"
      title="发布投票"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="data.vote" label-position="top">
        <el-form-item label="投票主题">
          <el-input v-model="data.vote.theme" placeholder="投票主题" />
        </el-form-item>
        <el-form-item label="投票介绍">
          <el-input
            v-model="data.vote.themeInfo"
            type="textarea"
            placeholder="投票介绍"
          />
        </el-form-item>
        <el-form-item label="投票类型">
          <el-select v-model="data.vote.themeTypeId" placeholder="投票类型">
            <el-option
              v-for="item in data.typeList"
              :label="item.type"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="选项">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-input v-model="input1" placeholder="选项1" />
            </el-col>
            <el-col :span="12" style="margin-bottom: 10px">
              <el-input v-model="input2" placeholder="选项2" />
            </el-col>
            <el-col :span="12">
              <el-input v-model="input3" placeholder="选项3" />
            </el-col>
            <el-col :span="12">
              <el-input v-model="input4" placeholder="选项4" />
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addVote = false">取消</el-button>
          <el-button type="primary" @click="insertVote()">提交</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="upUser" title="修改用户" width="30%">
      <template #default>
        <el-dialog
          v-model="editPassword"
          width="30%"
          title="修改密码"
          append-to-body
        >
          <el-form-item label="旧密码">
            <el-input
              v-model="oldPassword"
              autocomplete="off"
              type="password"
            />
          </el-form-item>
          <el-form-item label="新密码">
            <el-input
              v-model="newPassword"
              autocomplete="off"
              type="password"
            />
          </el-form-item>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="editPassword = false">取消</el-button>
              <el-button type="primary" @click="updatePassword()"
                >提交</el-button
              >
            </span>
          </template>
        </el-dialog>
        <el-form :model="data.userFrom" label-position="top">
          <el-form-item label="姓名">
            <el-input v-model="data.userFrom.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              v-model="data.userFrom.password"
              type="password"
              disabled
            />
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="data.userFrom.sex" class="ml-4">
              <el-radio label="男" size="large">男</el-radio>
              <el-radio label="女" size="large">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input-number v-model="data.userFrom.age" :min="1" :max="100" />
          </el-form-item>
        </el-form>
      </template>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="upUser = false">取消</el-button>
          <el-button type="danger" @click="editPassword = true"
            >修改密码</el-button
          >
          <el-button type="primary" @click="updateUser()">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";

const exId = ref(-1);
const userId = localStorage.getItem("userId");
const input1 = ref();
const input2 = ref();
const input3 = ref();
const input4 = ref();
const newPassword = ref();
const oldPassword = ref();
const editPassword = ref(false);
const addVote = ref(false);
const upUser = ref(false);
const upMyVote = ref(false);
const data = reactive({
  user: {},
  myVote: [],
  userVote: [],
  voteList: [],
  vote: {
    userId: parseInt(localStorage.getItem("userId")),
    myOption: "",
  },
  myVoteQuery: {
    pageIndex: 1,
    size: 5,
    total: 0,
  },
  typeList: [],
  userVoteQuery: {
    pageIndex: 1,
    size: 5,
    total: 0,
  },
  myVoteFrom: {
    myOption: "",
    userId: parseInt(localStorage.getItem("userId")),
  },
  voteFrom: {},
});
const editVote = (id) => {
  axios.get("/vote/getVoteById/" + id).then((res) => {
    data.myVoteFrom = res.data.data;
    for (var i = 1; i <= data.myVoteFrom.option.length; i++) {
      if (i == 1) {
        input1.value = data.myVoteFrom.option[0].option;
      } else if (i == 2) {
        input2.value = data.myVoteFrom.option[1].option;
      } else if (i == 3) {
        input3.value = data.myVoteFrom.option[2].option;
      } else if (i == 4) {
        input4.value = data.myVoteFrom.option[3].option;
      }
    }
    upMyVote.value = true;
  });
};
const editMyVote = (id, voteId) => {
  exId.value = id;
  axios.get("/user-vote/getUserVoteById/" + id).then((res) => {
    data.voteFrom = res.data.data;
  });
  axios.get("/vote/getVoteById/" + voteId).then((res) => {
    data.myVoteFrom = res.data.data;
  });
};
const editUser = (id) => {
  axios.get("/user/getUser/" + id).then((res) => {
    data.userFrom = res.data.data;
    upUser.value = true;
  });
};

const updatePassword = () => {
  if (oldPassword.value == data.userFrom.password) {
    data.userFrom.password = newPassword.value;
    ElMessage.success("设置密码完成,提交修改即可完成！");
    editPassword.value = false;
  } else {
    ElMessage.error("旧密码不正确！");
  }
};
const updateUser = () => {
  axios.put("/user/updateUser", data.userFrom).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success("修改成功");
    }
    upUser.value = false;
    getUser();
  });
};
const updateMyVote = () => {
  axios.put("/user-vote/updateUserVote", data.voteFrom).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success("保存成功！！！");
      exId.value = -1;
    }
    getUser();
  });
};

const handleUserVoteSizeChange = () => {
  getUser();
};
const handleUserVoteCurrentChange = () => {
  getUser();
};
const getUser = () => {
  axios.get("/user/getUser/" + userId).then((res) => {
    data.user = res.data.data;
  });
  axios
    .get(
      "/vote/getVoteByUserId/" +
        userId +
        "/" +
        data.myVoteQuery.pageIndex +
        "/" +
        data.myVoteQuery.size
    )
    .then((res) => {
      data.myVote = res.data.data.records;
      data.myVoteQuery.total = res.data.data.total;
    });
  axios
    .get(
      "/user-vote/getUserVoteByUserId/" +
        userId +
        "/" +
        data.userVoteQuery.pageIndex +
        "/" +
        data.userVoteQuery.size
    )
    .then((res) => {
      data.userVote = res.data.data.userVoteDtos;
      data.userVoteQuery.total = res.data.data.total;
    });
  axios.get("/type/getTypeList").then((res) => {
    data.typeList = res.data.data;
  });
};

const insertVote = () => {
  data.vote.myOption =
    input1.value + "," + input2.value + "," + input3.value + "," + input4.value;
  axios.post("/vote/saveVote", data.vote).then((res) => {
    if (res.data.code == 200) {
      addVote.value = false;
      ElMessage.success("添加成功");
    }
    data.vote = "";
    getUser();
    clearInput();
  });
};
const updateVote = () => {
  data.myVoteFrom.myOption =
    input1.value + "," + input2.value + "," + input3.value + "," + input4.value;
  axios.put("/vote/updateVote", data.myVoteFrom).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success("修改成功");
      upMyVote.value = false;
    }
    getUser();
    clearInput();
  });
};
const deleteVote = (id) => {
  axios.delete("/vote/deleteVote/" + id).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success("删除成功");
    }
    getUser();
  });
};

const deleteMyVote = (id) => {
  axios.delete("/user-vote/deleteUserVoteById/" + id).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success("删除成功");
    }
    getUser();
  });
};
const clearInput = () => {
  upMyVote.value = false;
  input1.value = "";
  input2.value = "";
  input3.value = "";
  input4.value = "";
};
getUser();
</script>
<style scoped>
.content {
  width: 1200px;
  margin: 0 auto;
}

.info {
  border-radius: 10px;
  padding: 20px;
  box-shadow: var(--el-box-shadow-light);
  margin-bottom: 10px;
}

.block {
  margin-top: 20px;
}

.fbu {
  float: right;
}
</style>
